<template>
    <div class="list">
        <el-row>
            <el-col :span="14" :offset="10">
                <el-button type="primary"  @click="downloadExl">导出</el-button>
                <a href="" :download="downloadName" id="hf"></a>
                <el-button type="primary" icon="plus" @click="addFormVisible = true">添加试卷</el-button>
                <el-button type="primary"  @click="getTemplateData()" :loading="tempLoading">刷新模板数据</el-button>
                <el-button type="primary"  @click="getExamData()" :loading="examLoading">刷新试卷数据</el-button>
             </el-col>
        </el-row>
        <div class="divline"></div>

        <!-- 列表 -->
        <el-table :data="tableData" border style="width: 99%" align='center'>
            <el-table-column type="expand">
                <template scope="props">  
                    <p class="p-expanded-title">试卷id: <span class="span-expanded-content">{{props.row.eid}}</span>模板id: <span class="span-expanded-content">{{props.row.tid}}</span> </p>
                    <p class="p-expanded-title">试卷创建时间: <span class="span-expanded-content">{{props.row.createdAt.replace('.000Z','')}} </span> 试卷最后修改时间: <span class="span-expanded-content">{{props.row.updatedAt.replace('.000Z','')}}</span></p>
                    <p class="p-expanded-title">试卷备注: <span class="span-expanded-content">{{props.row.eremark}}</span></p>
                    <p class="p-expanded-title">模板备注: <span class="span-expanded-content">{{props.row.tremark}}</span></p>

                </template>
            </el-table-column>
            <el-table-column
                :prop="type.info.prop"
                :sortable="type.info.sortable"
                :label="type.info.label"
                :align="type.style.align"
                :width="type.style.width"
                :formatter="formatterType"
                :filters="type.filter.list"
                :filter-method="filterType"
                :filter-multiple="type.filter.multiple">
            </el-table-column>
            <el-table-column v-for="item in fields"
                :prop="item.info.prop" 
                :label="item.info.label"
                :align="item.style.align"
                :width="item.style.width"
                :sortable="item.info.sortable">
            </el-table-column>

            <el-table-column
                :prop="status.info.prop"
                :sortable="status.info.sortable"
                :label="status.info.label"
                :align="status.style.align"
                :width="status.style.width"
                :formatter="formatterStatu"
                :filters="status.filter.list"
                :filter-method="filterStatu"
                :filter-multiple="status.filter.multiple">
            </el-table-column>

            <el-table-column label="操作" align="center" v-if="checkLevel()">
                <template scope='scope'>
                    <el-checkbox style="margin-left:10px" v-model="scope.row.checked" @change='onCheckedChange((scope.row))'>启用</el-checkbox>
                    <el-button type="danger" icon='delete' size="mini" @click='onDeleteExam(scope.row,scope.$index)'></el-button>
                </template>
            </el-table-column>            
        </el-table>

        <!-- 添加 -->
        <el-dialog title="添加题目" v-model="addFormVisible">
            <el-form :model="examForm" :rules="rules" ref="examForm" style="width: 80%" label-width="30%">
                <el-form-item prop="type" label="选择试卷类型">
                    <el-select v-model="examForm.type" placeholder="选择试卷类型">
                        <el-option v-for="item in examTypes" 
                            :key="item.value" 
                            :label="item.label" 
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="examinfo" label="选择试卷模板" >
                    <el-select v-model="examForm.examinfo" placeholder="选择试卷模板">
                        <el-option v-for="item in examSelectOptions" 
                            :key="item.key" 
                            :label="item.label" 
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item prop="eremark" label="试卷备注"
                    :rules="[{required: false}]">
                    <el-input 
                        placeholder="请输入试卷备注"
                        v-model="examForm.eremark" 
                        type="textarea" :rows="1">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('examForm')">提交</el-button>
                <el-button type="primary" @click="resetForm('examForm')">重置信息</el-button>
                <el-button @click="addFormVisible = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import SetsJs from './Sets.js';
    module.exports=SetsJs;
</script>

<style scoped>
  .divline {
    margin-top: 10px;
    margin-bottom: 20px;
    height:1px;
    width:100%;
    background:#999;
    overflow:hidden;
  } 
  .p-expanded-title {
    color:#000;
  }
  .span-expanded-content {
    margin-left:10px;
    margin-right:30px;
    color:#777;
  }
</style>